<template>
  <div class="container_table_wrap flex_row_center">
    <div class="card table_wrap">
      <AddButton :multiLanguages="multiLanguages" @openDialog="openDialog" />
      <el-table :data="tableData">
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="address" label="Address" />
        <el-table-column :label="multiLanguages('enabled')" align="center">
          <template #default="scope">
            <el-switch :modelValue="true" />
          </template>
        </el-table-column>
        <el-table-column :label="multiLanguages('actions')" align="center">
          <template #default="scope">
            <el-button @click="openDeleteDialog(scope.row.name)" type="danger" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
      <Pagination />
    </div>
  </div>
  <AddDialog :multiLanguages="multiLanguages" v-model:isShowAddDialog="isShowAddDialog" />
  <DeleteDialog
    :multiLanguages="multiLanguages"
    v-model:isShowDeleteDialog="isShowDeleteDialog"
    :description="description"
  />
</template>
<script setup lang="ts">
import { Ref, ref } from "vue";
import AddButton from "../common/AddButton.vue";
import Pagination from "../common/Pagination.vue";
import AddDialog from "./AddDialog.vue";
import DeleteDialog from "../common/DeleteDialog.vue";
import { Delete } from "@element-plus/icons-vue";
const props = defineProps<{
  multiLanguages: any;
}>();
const tableData = [
  {
    date: "2016-05-03",
    name: "aaa",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "bbb",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "ccc",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "ddd",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const isShowAddDialog = ref(false);
/**打开弹窗事件 */
const openDialog = () => {
  isShowAddDialog.value = true;
};
const isShowDeleteDialog = ref(false);
const description = ref("");
/**打开删除弹窗事件 */
const openDeleteDialog = (value: string) => {
  isShowDeleteDialog.value = true;
  description.value = value;
};
</script>
<style scoped lang="less">
.container_table_wrap {
  width: 100%;
  .table_wrap {
    width: 97%;
  }
}
</style>
